CSS: Add bright background to images when using dark theme #309
Conversation
✅ Deploy Preview for trusting-archimedes-14c863 ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
| @@ -89,3 +89,8 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { | |||
| .theme-doc-sidebar-menu { | |||
| font-size: 14px; | |||
| } | |||
|
|
|||
| /* Hack to make .svg and .png diagrams readable in dark theme */ | |||
| html[data-theme='dark'] main img { | |||
There was a problem hiding this comment.
If we'll be adding some transparent themed images: img:not([class^="themedImage"])
(not the most stable element selector but, https://docusaurus.io/docs/markdown-features/assets#themed-images
compiles un-themed images as <img class="img_vXGZ">
and themed images as <img class="themedImage_qLAv themedImage--dark_ONYO"> )
There was a problem hiding this comment.
oh. and :not([src$='#gh-dark-mode-only'])
There was a problem hiding this comment.
Not really - I imagined when #308 is done properly, then each image must either be universal (good to read both on light and dark background) or themed (one image for light, other for dark theme). Your hack would always set the background for universal images when on the dark background even though they should be readable fine?
A temporary hack to mitigate #308. Adds white background to images when switching to dark theme.